<template>
  <div class="nvr-video" :style="{ width: nvrSize.width, height: nvrSize.height }">
    <embed
      v-if="visible"
      :id="id"
      :ocxid="id"
      spocxevent="OnOCXCtrlMsg"
      type="application/bl-ocxnvr"
      :style="{
        position: 'relative',
        zIndex: '3000',
        width: '100%',
        height: toolbar ? 'calc(100% - 60px)' : '100%',
      }"
    />
    <div v-if="toolbar" class="ocxnvr-toolbar" style="height: 60px"></div>
  </div>
</template>

<script>
import dayjs from 'dayjs';
import { debounce } from 'lodash-es';
import { TslNvrCmd } from './TslNvrCmd.js';
import { getUUID } from '../../../utils/index.js';

function getUnix(time) {
  return dayjs(time).unix();
}

export default {
  name: 'TslNvrPlayer',
  props: {
    width: { type: [Number, String], default: 1000 },
    height: { type: [Number, String], default: 622 },
    /* options: { code: "", name: "" } or [{ code: "", name: "" }] */
    options: { type: [Object, Array], default: () => [] },
    /* 自动开始播放 */
    autoplay: { type: Boolean, default: true },
    /* 实时模式 */
    realshow: { type: Boolean, default: true },
    toolbar: { type: Boolean, default: false },
    /* 是否在新开nvr-video之前先关闭已存在的nvr-video */
    singleMode: { type: Boolean, default: true },
    /* 回放时需要 id,name,startTime,endTime这些数据,可以通过data选项提供 */
    playbackData: { type: Object, default: () => ({}) },
  },
  data() {
    return {
      id: 'TslNvrPlayer-' + getUUID(),
      visible: true,
      /* 高宽比 */
      rate: 0.622,
    };
  },
  computed: {
    nvrSize() {
      const getVal = (val) => {
        return typeof val === 'number' ? val + 'px' : val;
      };
      const size = { w: 1000, h: 622 };
      const rate = size.h / size.w;
      let { width = size.w, height = size.h } = this;
      // console.log(typeof width === "undefined" ? height / rate : width);
      // console.log(typeof height === "undefined" ? width * rate : height);
      return {
        width: getVal((typeof width === 'undefined' ? height / rate : width) || size.w),
        height: getVal((typeof height === 'undefined' ? width * rate : height) || size.h),
      };
    },
    nvrConfig() {
      return {
        realshow: this.realshow,
        viewnum: Array.isArray(this.options) ? this.options.length : 1,
      };
    },
  },
  watch: {
    nvrConfig: {
      immediate: false,
      deep: true,
      handler: debounce(() => {
        this.init().play();
      }),
    },
  },
  unmounted() {
    this.stop();
    this.visible = false;
    if (this.singleMode) {
      this.$vbus.$off('stopExistNvrVideo', this.stopExistNvrVideo);
      this.$vbus.$off('startExistNvrVideo', this.startExistNvrVideo);
      this.$vbus.$emit('startExistNvrVideo');
    }
  },
  created() {
    this.TslNvrCmd = new TslNvrCmd(this.id);
    if (this.singleMode) {
      this.$vbus.$emit('stopExistNvrVideo');
    }
  },
  mounted() {
    if (this.singleMode) {
      this.$vbus.$on('stopExistNvrVideo', this.stopExistNvrVideo, this);
      this.$vbus.$on('startExistNvrVideo', this.startExistNvrVideo, this);
    }
    this.init();
    this.$emit('mounted');
  },
  methods: {
    init() {
      this.stop().open();
      if (this.autoplay) this.play();
      return this;
    },
    open() {
      this.TslNvrCmd.create(this.nvrConfig);
      return this;
    },
    replay() {
      const opt = this.getReplayOption();
      const sec = getUnix(opt.endTime) - getUnix(opt.beginTime);
      this.TslNvrCmd.replayVideo(opt);
      clearTimeout(this.replayTimer);
      this.replayTimer = setTimeout(() => {
        this.stop();
        this.$emit('playEnd');
      }, sec * 1e3);
    },
    play() {
      if (!this.realshow) {
        return this.replay();
      }
      Array.isArray(this.options) ? this.TslNvrCmd.playVideos(this.options) : this.TslNvrCmd.playVideo(this.options);
    },
    pause() {
      this.TslNvrCmd.pauseViod();
      return this;
    },
    stop() {
      clearTimeout(this.replayTimer);
      this.TslNvrCmd.stopViod();
      this.TslNvrCmd.closeallchnViod();
      return this;
    },
    getReplayOption() {
      return {
        id: this.playbackData.id,
        name: this.playbackData.name,
        beginTime: this.playbackData.beginTime,
        endTime: this.playbackData.endTime,
      };
    },
    stopExistNvrVideo() {
      this.stop();
      this.visible = false;
    },
    startExistNvrVideo() {
      this.visible = true;
      this.$nextTick(() => {
        this.stop().open().play();
      });
    },
  },
};
</script>

<style lang="less">
.nvr-video {
  position: relative;
  font-size: 0;
  word-spacing: 0;
  letter-spacing: 0;
  .ocxnvr-toolbar {
    position: relative;
    width: 100%;
    background: rgba(255, 255, 255, 0.15);
  }
}
</style>
